import "./index.less"
import { useEffect, useRef, useState } from "react"
import { Document, Page, pdfjs } from "react-pdf"
import { Button, message, Pagination } from "antd";
import { EditOutlined, VerticalAlignBottomOutlined, UpOutlined, DownOutlined } from '@ant-design/icons';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'


pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cat.net/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`


let PageHeight = 0

export default function PDf() {
    const [numPages, setNumPages] = useState(0);
    const [pageNumber, setPageNumber] = useState(1);

    function onDocumentLoadSuccess(e: any) {
        setNumPages(e.numPages);
    }

    // 保存PDF当前页数，用于实现翻页
    const [current, setCurrent] = useState(1);
    // 总页数，用于实现翻页
    const [total, setTotal] = useState(20);

    //监听元素滚动

    const canRef = useRef<any>()
    let pdf = useRef<any>(null)
    let saveIndex = useRef<any>()
    let [index, setIndex] = useState(0)
    useEffect(() => {
        // PageHeight = canRef.current.offsetHeight
        pdf.current.addEventListener("scroll", handlerScroll)
    }, [])


    const handlerScroll = (e: any) => {

        let scrollTop = e.target.scrollTop - 20
        let currentIndex = Math.floor(scrollTop / PageHeight)
        currentIndex == index && setIndex(currentIndex)
        console.log(index);
    }
    const nextPage = () => {
        if (index == numPages - 1) return
        let nextIndex = index + 1
        setIndex(nextIndex)
        pdf.current.scrollTop = nextIndex * PageHeight + 20
    }
    const prePage = () => {
        if (index == 0) return
        let preIndex = index - 1
        setIndex(preIndex)
        pdf.current.scrollTop = preIndex * PageHeight + 20
    }
    const onLoadSuccess = (e: any) => {

        PageHeight = e.height ? e.height : 0
    }


    return (
        <div className="PDF" ref={pdf} >
            <div className="pdfCanvance">
                <Document file="http://localhost:8896/download/pdf/b009c902-2dac-4b5c-8e75-68024e43659b.pdf" onLoadSuccess={onDocumentLoadSuccess} renderMode="canvas">
                    {new Array(numPages).fill('').map((cur, index) => (
                        <Page
                            key={index}
                            width={window.screen.width / 2}
                            pageNumber={index + 1}
                            renderAnnotationLayer={false}
                            renderTextLayer={false}
                            canvasRef={canRef}
                            onLoadSuccess={onLoadSuccess}
                        />
                    ))}
                </Document>
            </div>
            <div className="iconAction ">
                <div className="fixed flex_a_c">
                    <div className={`icon ${index == 0 ? "disable" : ''}`} onClick={prePage}><UpOutlined /></div>
                    <div className="icon"><EditOutlined /></div>
                    <div className="icon"><VerticalAlignBottomOutlined /></div>
                    <div className={`icon ${index == numPages - 1 ? "disable" : ''}`} onClick={nextPage}><DownOutlined /></div>
                </div>
            </div>
        </div>

    )
}